<template>
  <div class="selectFee">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="费目列表" name="first">
        <el-table :data="feeListsData" border :height="feeListsHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row>
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="tayNo" label="费目名称" width="260" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tayIeflag" label="单位" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="cltName" label="单价" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="tayStates" label="币种" show-overflow-tooltip  ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="协议费目列表" name="second">
        <el-table :data="agreementFeeData" border :height="agreementFeeHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row>
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="tayNo" label="费目名称" width="260" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tayIeflag" label="单位" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="cltName" label="单价" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="tayStates" label="币种" show-overflow-tooltip  ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        ref="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.PageSize"
        :layout="Pagination.layout"
        :total="Pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'

export default {
  mixins: [paginationMixin],
  data() {
    return {
      activeName: 'first', // tab选中
      feeListsData: [], // 费目属性表格数据
      feeListsHeight: 420, // 费目属性表格高度
      agreementFeeData: [], // 协议费目列表数据
      agreementFeeHeight: 420, // 协议费目列表高度
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.selectFee {
  width: 100%;
  height: 500px;
  .block {
    margin-top: 10px;
  }
}
</style>
